<!DOCTYPE html>
<!--
  ~ Copyright (c) 2018.
  ~ This file was written by fancyears·milos·malvis @connor. Any question/bug you can't post to 1243093366@qq.com.
  ~ ALL RIGHTS RESERVED.
  -->

<html xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head>
    <meta charset="UTF-8">
    <title>修改颜色基础信息</title>
</head>
<body onload="loadInput()">
    <button id="btnAdd" class="btn btn-success" style="position: fixed;margin-left:38%;margin-top:-60px;margin-bottom: -10px;z-index:99999;" onclick="add()">添加油漆物料</button>
<form id="colorForm" role="form" method="post" action="./colorSet/updateWithEntity2">
    <input id="puid" name="puid" type="hidden" th:value="${entity.puid}"/>
    <div class="form-group">
        <label for="pColorOfSet">色系</label>
        <input class="form-control" id="pColorOfSet" name="pColorOfSet" type="text"
               th:value="${entity.pColorOfSet}"/>
    </div>
    <div class="form-group">
        <label for="pColorName">颜色名称</label>
        <input class="form-control" id="pColorName" name="pColorName" type="text"
               th:value="${entity.pColorName}"
               placeholder="请输入颜色名称"/>
    </div>
    <div class="form-group">
        <label for="pColorCode">颜色代号</label>
        <input class="form-control" id="pColorCode" name="pColorCode" type="text"
               th:value="${entity.pColorCode}"
               placeholder="请输入颜色代号"/>
    </div>
    <div class="form-group">
        <label for="pColorPlate">色板编号</label>
        <input class="form-control" id="pColorPlate" name="pColorPlate" type="text"
               th:value="${entity.pColorPlate}"
               placeholder="请输入颜色代号"
        />
    </div>
    <div class="form-group">
        <label>是否拼色</label>
        <select class="form-control input-small" data-style="btn-info"
                id="pColorIsMultiply" name="pColorIsMultiply">
            <option th:value="N" th:text="否" th:selected="${entity.pColorIsMultiply=='N'?true:false}">
            </option>
            <option th:value="Y" th:text="是" th:selected="${entity.pColorIsMultiply=='Y'?true:false}">
            </option>
        </select>
    </div>
    <!--<div class="form-group">
        <label for="strColorEffectedDate">生效日期</label>
        <input class="form-control" id="strColorEffectedDate" name="strColorEffectedDate"
               th:value="${entity.strColorEffectedDate}"
               placeholder="请选择生效日期"
        />
    </div>
    <div class="form-group">
        <label for="strColorAbolishDate">废止日期</label>
        <input class="form-control" id="strColorAbolishDate" name="strColorAbolishDate"
               th:value="${entity.strColorAbolishDate}"
               placeholder="请选择废止日期"
        />
    </div>-->
    <div class="form-group">
        <label for="pColorComment">备注</label>
        <input class="form-control" id="pColorComment" name="pColorComment" type="text"
               th:value="${entity.pColorComment}"
               placeholder="备注"/>
        <!--<input type="text" hidden="hidden" id="csPaintMaterielCodes"  th:value="${entity.csPaintMaterielCodes}"/>-->
        <input id="csPaintMaterielCodes" name="csPaintMaterielCodes" type="text" th:value="${entity.csPaintMaterielCodes}" style="display: none"/>
    </div>
</form>

<script th:inline="javascript">
    <![CDATA[
    var total = 0;
    var sttt = [];
    function checkMaterielCode(inp){
        var materielCode = $(inp).val();
        $.ajax({
            type : "GET",
            url : "./colorSet/checkMaterielCode?materielCode="+materielCode,
            success : function (result) {
                if(result.status){
                    $(inp).parent().find(".valError").hide();
                    $(inp).parent().find(".valError").text("");
                }else {
                    $(inp).parent().find(".valError").text(result.msg);
                    $(inp).parent().find(".valError").show();
                }
            },
            error : function (result) {

            }
        });
    }
    $(
        function () {
            var csPaintMaterielCodes = $("#csPaintMaterielCodes").val();
            var strs = csPaintMaterielCodes.split('<'+'br'+'>');
            for(let i in strs){
                var child = '<div class="form-group"><label for="pColorCode">油漆物料</label><a onclick="delInput(this)" style="float:right">删除</a>' +
                    '<br><span style="color : red;display: none" class="valError"></span>'+

                    '<input type="text" class="form-control" id="color_'+total+'" name="color_'+total+'" placeholder="请输入油漆物料" onblur="checkMaterielCode(this)"/>' +
                    '</div>';
                $("#colorForm").append(child);
                $("#color_"+total).val(strs[i]);
                total++;
            }
            $('#colorForm').bootstrapValidator({
                message: 'This value is not valid',
                feedbackIcons: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields: {
                    pColorOfSet: {
                        message: '颜色系列名称验证失败',
                        validators: {
                            notEmpty: {
                                message: '颜色系列名称不能为空'
                            }
                        }
                    },
                    pColorName: {
                        message: '颜色名称验证失败',
                        validators: {
                            notEmpty: {
                                message: '颜色名称不能为空'
                            }
                        }
                    },
                    pColorCode: {
                        message: '颜色代号验证失败',
                        validators: {
                            notEmpty: {
                                message: '颜色代号不能为空'
                            },
                            threshold: 1, //有1字符以上才发送ajax请求，（input中输入一个字符，插件会向服务器发送一次，设置限制，6字符以上才开始）
                            remote: {//ajax验证。server result:{"valid",true or false} 向服务发送当前input name值，获得一个json数据。例表示正确：{"valid",true}
                                url: 'colorSet/validateCodeWithPuid',//验证地址
                                message: '颜色代号已存在',//提示消息
                                delay: 500,//每输入一个字符，就发ajax请求，服务器压力还是太大，设置2秒发送一次ajax（默认输入一个字符，提交一次，服务器压力太大）
                                // *自定义提交数据，默认值提交当前input value
                                data: function (validator) {
                                    return {
                                        puid: $('#puid').val(),
                                        pColorCode: $("#pColorCode").val()
                                    };
                                },
                                type: 'POST',//请求方式
                            },
                        }
                    }
                }
            });
            // 绑定dialog的确定按钮的监听事件
            $("#btnOk", window.top.document).click(function () {
                var errorSpan = $('.valError').text();
                if(errorSpan!=""||errorSpan.length>0){
                    window.Ewin.alert({message: '请填写正确的油漆物料'});
                    return false;
                }
                var bootstrapValidator = $("#colorForm", window.top.document).data('bootstrapValidator');
                bootstrapValidator.validate();
                //重新验证字段
               /* bootstrapValidator.revalidateField("strColorEffectedDate");
                bootstrapValidator.revalidateField("strColorAbolishDate");*/
                if (bootstrapValidator.isValid()) {
                    // var url = $("#colorForm", window.top.document).attr('action');
                    // var myData = JSON.stringify({
                    //     "pColorCode": $("#pColorCode").val(),
                    //     "pColorComment": $("#pColorComment").val(),
                    //     "pColorName": $("#pColorName").val(),
                    //     "pColorOfSet": $("#pColorOfSet").val(),
                    //     "puid": $("#puid").val(),
                    //     "pColorIsMultiply": $("#pColorIsMultiply").val(),
                    //     "pColorPlate": $("#pColorPlate").val()
                    //     /*,
                    //     "strColorEffectedDate": $("#strColorEffectedDate").val(),
                    //     "strColorAbolishDate": $("#strColorAbolishDate").val()*/
                    //
                    // });
                    var url = $("#colorForm", window.top.document).attr('action');
                    <!--其实不要puid，puid会在服务器上生成-->
                    let data={};
                    data[puid]=$("#puid").val();
                    var _d = $("#colorForm").serializeArray();
                    for (var p in _d) {
                        data[_d[p].name] = _d[p].value;
                    }
                    $.ajax({
                        contentType:
                            "application/json",
                        type:
                            'POST',
                        url: url,
                        data: JSON.stringify(data),
                        success:
                            function (result) {
                                // $('.modal-dialog', window.top.document).parent('div').remove()
                                // $('body', window.top.document).find('.modal-backdrop').remove();
                                // jquery 调用刷新当前操作的table页面的refresh方法
                                // $(window.parent.document).contents().find(".tab-pane.fade.active.in iframe")[0].contentWindow.doQuery();
                                activeTabBodyRefresh();
                                if (result.status) {
                                    layer.msg('修改数据成功!', {icon: 1, time: 2000})
                                    // window.Ewin.alert({message: '修改数据成功!'});
                                }
                                else {
                                    // layer.msg(result.msg, {icon: 1, time: 2000})
                                    window.Ewin.alert({message: result.msg+'修改数据失败!'});
                                }

                            },
                        error: function (status) {
                            window.Ewin.alert({message: status.status + ':修改数据失败!'});
                        }
                    });
                }
            });
        },
        $('#strColorEffectedDate').datetimepicker({
            format: 'yyyy-mm-dd',//日期的格式
            weekStart: 1,//一周开始， 0（星期日）到6（星期六）
            startDate: "1900-01-01",//选择器的开始日期
            autoclose: true,//日期选择完成后是否关闭选择框
            bootcssVer: 3,//显示向左向右的箭头
            language: 'zh_CN',//语言
            minView: 2,//表示日期选择的最小范围，默认是hour
            todayHighlight: true, //今天是否高亮显示
            todayBtn: true
        }),
        $('#strColorAbolishDate').datetimepicker({
            format: 'yyyy-mm-dd',//日期的格式
            weekStart: 1,// 0（星期日）到6（星期六）
            startDate: "1900-01-01",//选择器的开始日期
            autoclose: true,//日期选择完成后是否关闭选择框
            bootcssVer: 3,//显示向左向右的箭头
            language: 'zh_CN',//语言
            minView: 2,//表示日期选择的最小范围，默认是hour
            todayHighlight: true, //今天是否高亮显示
            todayBtn: true
        }),
        $("#btnAdd").click(function () {
            var child = '<div class="form-group"><label for="pColorCode">油漆物料</label><a onclick="delInput(this)" style="float:right">删除</a>' +
                '<br><span style="color : red;display: none" class="valError"></span>'+

                '<input type="text" class="form-control" id="color_'+total+'" name="color_'+total+'" placeholder="请输入油漆物料" onblur="checkMaterielCode(this)"/>' +
                '</div>';
            // var child = '<div class="form-group col-lg-12"><label for="pColorCode">油漆物料</label>' +
            //     '</div>'+
            //     '<br><span style="color : red;display: none" class="valError"></span>'+
            //     '<div class="col-lg-4">' +
            //     '<a onclick="delInput(this)">删除</a>'+
            //     '</div>'+
            //     '<div class="col-lg-8">'+
            //     '<input type="text" class="form-control" id="color_'+total+'" name="color_'+total+'" placeholder="请输入油漆物料" onblur="checkMaterielCode(this)"/>' +
            //     '</div>';
            $("#colorForm").append(child);
            total++;
        })
    );
    function delInput(delButtton){
        $(delButtton).parent().remove();
    }
    ]]>
</script>
<script th:src="@{/layer/layer.js}"></script>
</body>
</html>